<template>
  <div id="receiptAdd" ref="receiptAdd" class="wrapper p-3">
    <dialog-bg class="w-100" :height="300"></dialog-bg>
    <table class="w-100 p_relative" border="1" style="border: 1px solid #0D2264;z-index: 2;">
      <tr height="40">
        <td colspan="2" class="text-center" style="line-height:22px; ">
          <label class="float-left pl-3 cursor_p" @click="backFun"> <i class="iconfont icon-lujing mr-1 font14" ></i>返回</label>
          <label class="font16">材料清单</label>
        </td>
      </tr>
      <tr>
        <td class="px-3 w130 text-right">电器（个）</td>
        <td class="pt-3">
          <el-row :gutter="15" >
            <el-col :span="8" class="mb-3">
              <label class="w100 text-right">镇流器钠灯：</label>
              <el-input class="w65" size="small" v-model="material.Count2001" :disabled="isDisabled"></el-input>
            </el-col>
            <el-col :span="8" class="mb-3">
              <label class="w100 text-right">镇流器汞灯：</label>
              <el-input class="w65" size="small" v-model="material.Count2002" :disabled="isDisabled"></el-input>
            </el-col>
            <el-col :span="8" class="mb-3">
              <label class="w100 text-right">接线板：</label>
              <el-input class="w65" size="small" v-model="material.Count2007" :disabled="isDisabled"></el-input>
            </el-col>
            <el-col :span="8" class="mb-3">
              <label class="w100 text-right">交流接触器：</label>
              <el-input class="w65" size="small" v-model="material.Count2004" :disabled="isDisabled"></el-input>
            </el-col>
            <el-col :span="8" class="mb-3">
              <label class="w100 text-right">触发器：</label>
              <el-input class="w65" size="small" v-model="material.Count2005" :disabled="isDisabled"></el-input>
            </el-col>
            <el-col :span="8" class="mb-3">
              <label class="w100 text-right">灯头：</label>
              <el-input class="w65" size="small" v-model="material.Count2006" :disabled="isDisabled"></el-input>
            </el-col>

            <el-col :span="8" class="mb-3">
              <label class="w100 text-right">门盖：</label>
              <el-input class="w65" size="small" v-model="material.Count2008" :disabled="isDisabled"></el-input>
            </el-col>
            <el-col :span="10" class="mb-3">
              <label class="w150 text-right" style="line-height: 16px;">镇流器金属卤化钠灯：</label>
              <el-input class="w65" size="small" v-model="material.Count2003" :disabled="isDisabled"></el-input>
            </el-col>
          </el-row>
        </td>
      </tr>
      <tr>
        <td class="px-3 w130 text-right">电缆（个）</td>
        <td class="pt-3">
          <el-row :gutter="15">
            <el-col :span="8" class="mb-3">
              <label class="w100 text-right">架空线(铜)：</label>
              <el-input class="w65" size="small" v-model="material.Count3001" :disabled="isDisabled"></el-input>
            </el-col>
            <el-col :span="8" class="mb-3">
              <label class="w100 text-right">架空线(铝)：</label>
              <el-input class="w65" size="small" v-model="material.Count3002" :disabled="isDisabled"></el-input>
            </el-col>
            <el-col :span="8" class="mb-3">
              <label class="w100 text-right">电缆(铝)：</label>
              <el-input class="w65" size="small" v-model="material.Count3003" :disabled="isDisabled"></el-input>
            </el-col>
            <el-col :span="8">
              <label class="w100 text-right">护套线：</label>
              <el-input class="w65" size="small" v-model="material.Count3004" :disabled="isDisabled"></el-input>
            </el-col>
            <el-col :span="8" class="mb-3">
              <label class="w100 text-right">其它：</label>
              <el-input class="w65" size="small" v-model="material.Count3005" :disabled="isDisabled"></el-input>
            </el-col>
          </el-row>
        </td>
      </tr>
      <tr>
        <td class="px-3 w130 text-right">灯泡（个）</td>
        <td class="py-3">
          <el-row>
            <el-col :span="6">
              <label class="w70 text-right">钠灯：</label>
              <el-input class="w65" size="small" v-model="material.Count1001" :disabled="isDisabled"></el-input>
            </el-col>
            <el-col :span="6">
              <label class="w70 text-right">节能灯：</label>
              <el-input class="w65" size="small" v-model="material.Count1002" :disabled="isDisabled"></el-input>
            </el-col>
            <el-col :span="6">
              <label class="w70 text-right">汞灯：</label>
              <el-input class="w65" size="small" v-model="material.Count1003" :disabled="isDisabled"></el-input>
            </el-col>
            <el-col :span="6">
              <label class="w70 text-right">LED灯：</label>
              <el-input class="w65" size="small" v-model="material.Count1004" :disabled="isDisabled"></el-input>
            </el-col>
          </el-row>
        </td>
      </tr>
      <tr>
        <td class="px-3 w130 text-right">其他（个）</td>
        <td class="py-3">
          <el-row>
            <el-col :span="6">
              <label class="w70 text-right">井框：</label>
              <el-input class="w65" size="small" v-model="material.Count4001" :disabled="isDisabled"></el-input>
            </el-col>
            <el-col :span="6">
              <label class="w70 text-right">井盖：</label>
              <el-input class="w65" size="small" v-model="material.Count4002" :disabled="isDisabled"></el-input>
            </el-col>
            <el-col :span="6">
              <label class="w70 text-right">灯壳：</label>
              <el-input class="w65" size="small" v-model="material.Count4003" :disabled="isDisabled"></el-input>
            </el-col>
            <el-col :span="6">
              <label class="w70 text-right">灯罩：</label>
              <el-input class="w65" size="small" v-model="material.Count4004" :disabled="isDisabled"></el-input>
            </el-col>
          </el-row>
        </td>
      </tr>
      <tr height="50">
        <td class="px-3 w130 text-right">上传图片</td>
        <td class="px-3">
          <input type="file"  multiple="multiple"  accept=".png,.jpg,jpeg" @change="changeFiles" v-if="!isDisabled">
          <label v-if="isDisabled&&files.length==0">无</label>
          <el-button size="small"  class="ur-btn-round ur-btn float-right ur-btn-primary" v-if="files.length"  @click="showCarousel=true">
            <i class="iconfont icon-xianshi txt_blue2"></i>图片预览
          </el-button>
        </td>
      </tr>
      <tr height="50">
        <td class="px-3 w130 text-right">* 维修结果</td>
        <td class="px-3 py-3">
          <el-tooltip :content="errors.first('content')" :value="errors.has('content')" :manual="true">
            <el-input class="w-100" v-model="content" size="small" :class="{'is-error':errors.has('content')}" name="content" v-validate="'required|max:63'" :disabled="isDisabled"></el-input>
          </el-tooltip>
        </td>
      </tr>
    </table>
<!--    v-if="!isDisabled"-->
    <div class="mt-2 text-center p_relative" style="z-index: 2;" >
      <el-button class="ur-btn ur-btn-primary" @click="save"><i class="iconfont icon-sure"></i>保存</el-button>
      <el-button class="ur-btn ur-btn-primary" @click="backFun"><i class="iconfont icon-close3"></i>取消</el-button>
    </div>

    <div class="w-100" v-show="showCarousel" style="position: absolute;background: rgba(0,0,0,.4);top:0;left: 0;z-index: 3;" :style="{'height':height+40+'px'}">
      <div class="carousel_wrap h-100">
        <div class="text-right text-white" @click="showCarousel=false" style="font-weight: 600;line-height: 30px;">
          <i class="iconfont icon-close" style="font-size:25px;"></i>
        </div>
        <el-carousel style="height: 80%;" :interval="5000" arrow="always">
          <el-carousel-item  v-for="(file,index) in files" :key="index">
            <img :src="server+file.OriginUrl" style="height: 100%">
            <i  class="iconfont icon-close3 font24 text-warning" @click="delFile(file,index)"
               style="font-size:20px;font-weight:800;position: absolute;right: 5px; top:10px;line-height: normal"></i>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import {mapState} from 'vuex'
  import api from 'api/api'
  import dialogBg from "base/dialog-bg"

  export default {
    components: {dialogBg},
    props: {
      isAdd:false,
      work:{},
      receipt:{}
    },
    data() {
      return {
        height:0,
        showCarousel:false,
        formData:new FormData(),
        material:{},
        content:'',
        files:[],
        server:api.ajaxServe,
      }
    },
    watch: {},
    computed: {
      ...mapState({
        limits:state=>state.user.userInfo.limits
      }),
      isDisabled(){
        return [10,11].indexOf(this.work.WorkOrderState)!=-1
      }
    },
    methods: {
      backFun(){
        this.$emit('receiptDialog',{showWorkDeal:true,showReceipt:false})
      },
      query(){
        api.fetchSimple('/SHWorkorder/QReceiptInfo?rptId='+this.receipt.Id)
          .then(r=>{
            this.material=r.material
            this.files=r.files?r.files:[]
          })
      },
      changeFiles(){
        let files=event.target.files
        for(let i=0;i<files.length;i++){
          this.formData.append('files',files[i])
        }
      },
      changeFiles(){
        let files=event.target.files
        for(let i=0;i<files.length;i++){
          this.formData.append('files',files[i])
        }
      },
      save(){
        this.$validator.validateAll().then((res) => {
          if (res) {
            let url = '/SHWorkorder/InsertReceipt?workId=' + this.work.Id + '&content=' + this.content
            if (this.material.ReceiptId) url = '/SHWorkorder/UpdateReceipt?content=' + this.content
            api.fetch(url, this.material)
              .then(r => {
                if (this.formData.getAll('files').length) {
                  if (this.material.ReceiptId) {//修改
                    this.uploadFiles(this.material.ReceiptId)
                  } else {//新增
                    this.uploadFiles(r)
                  }
                } else {
                  this.backFun()
                }
              })
          }
        })
      },
      uploadFiles(id){
        api.httpFormData('/SHWorkorder/SaveReceiptFiles?receiptId='+id,this.formData)
          .then(r=>{
           this.backFun()
          })
      },
      delFile(file,index){//删除回执附件
        this.$confirm('确认删除选中记录吗？', '提示', {type: 'warning'})
          .then(() => {
            api.fetchSimple('/SHWorkorder/DelReceiptFiles',{receiptId:this.receipt.Id,fileIds:[file.Id]})
              .then(r=>{
                this.files.splice(index,1)
                if(this.files.length==0) this.showCarousel=false
              })
          })
      },
    },
    created() {
      if(this.receipt){
        this.content=this.receipt.Content
        this.query()
      }
    },
    mounted() {
      this.height = this.$refs.receiptAdd.clientHeight
    }
  }
</script>
<style  lang="stylus" rel="stylesheet/stylus">
  #receiptAdd{
    .lineh16 .el-form-item__label{line-height: 18px;padding-right :3px;}
    .el-form-item{margin-bottom: 5px;}
    /*.carousel_wrap{width: 650px;position: absolute;top:50%;left: 50%;margin-left: -325px;margin-top: -150px;}*/
    .el-carousel__container{height:100%;}
    .el-carousel__item{text-align: center;background-color: rgba(0,0,0,.1);}
  }
</style>
